﻿<!doctype html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>  
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>登录</title>
<link rel="stylesheet" type="text/css" href="css/styles.css">
</head>
<body>
<div class="htmleaf-container" id="main">
	<div class="wrapper">
		<div class="container">
			<h1>Welcome</h1>		
			<form class="form">
				<input name="username" v-model="username" type="text" placeholder="Username">
				<input name="password" v-model="password" type="password" placeholder="Password">
				<a type="submit" id="login-button" @click="login">login-button</a>
				<br></br>			
			</form>
		</div>
		
		<ul class="bg-bubbles">
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
		</ul>
	</div>
	
</div>

<script src="js/jquery-2.1.1.min.js" type="text/javascript"></script>
<script>
$('#login-button').click(function (event) {
	event.preventDefault();
	$('form').fadeOut(500);
	$('.wrapper').addClass('form-success');
});
var vc = new Vue({
	el:'#main',
	data:{
		username:"",
		password:"",	
	},
	methods:{
		login(){
			var username = this.username;
            var password = this.password;
            axios.get('http://localhost:8080/WebDemo/LogInServlet',{
                params:{
                    username:username,
                    password:password
                }
            }).then(function(res){
            	if(res.data.state=="true"){
            		sessionStorage.setItem("json",JSON.stringify(res.data));
            	    window.location.href = "http://localhost:8080/WebDemo/frontend/main/content.html";
            	}
            	else{            		
            		alert("用户名或密码错误");
            	}
            });			
		}
	}
})
</script>

<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';color:#000000">
<h1>员工考勤请假系统</h1>
</div>
</body>
</html>